﻿@page "/components/collapse"

<PageOutlet Url="components/collapse"
            Title="Collapse"
            Description="collapse component of the bit BlazorUI components" />

<DemoPage Name="Collapse"
          Description="The Collapse component allows the user to show and hide sections of related content on a page."
          Parameters="componentParameters"
          SubClasses="componentSubClasses"
          GitHubUrl="Surfaces/Collapse/BitCollapse.razor"
          GitHubDemoUrl="Surfaces/Collapse/BitCollapseDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
        <div>
            <BitToggleButton OnText="Collapse" OffText="Expand" @bind-IsChecked="expanded" />
            <BitCollapse Expanded="expanded">
                In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                shaped into meaning, and the emotions ready to resonate with every reader.
                <br />
                In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                each word has the power to transform into something extraordinary. Here lies the start of something new—an
                opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                begins here, in this quiet moment where everything is possible.
            </BitCollapse>
        </div>
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
        <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
        <br /><br />
        <div>
            <BitToggleButton OnText="Collapse" OffText="Expand" @bind-IsChecked="expandedStyle" />
            <br /><br />
            <BitCollapse Expanded="expandedStyle" Styles="@(new() { Expanded = "padding:10px;background-color:#333;border: 1px solid #ff0000;" })">
                In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                shaped into meaning, and the emotions ready to resonate with every reader.
                <br />
                In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                each word has the power to transform into something extraordinary. Here lies the start of something new—an
                opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                begins here, in this quiet moment where everything is possible.
            </BitCollapse>
            <br /><br /><br /><br />
            <BitToggleButton OnText="Collapse" OffText="Expand" @bind-IsChecked="expandedClass" />
            <br /><br />
            <BitCollapse Expanded="expandedClass" Classes="@(new() { Expanded = "custom-expanded" })">
                In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                shaped into meaning, and the emotions ready to resonate with every reader.
                <br />
                In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                each word has the power to transform into something extraordinary. Here lies the start of something new—an
                opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                begins here, in this quiet moment where everything is possible.
            </BitCollapse>
        </div>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
        <div>Use BitCollapse in right-to-left (RTL).</div><br />
        <br /><br />
        <div>
            <BitToggleButton OnText="بستن" OffText="باز کردن" @bind-IsChecked="expandedRtl" />
            <BitCollapse Expanded="expandedRtl" Dir="BitDir.Rtl">
                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
                و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
            </BitCollapse>
        </div>
    </DemoExample>
</DemoPage>